<template>
  <div class="container">
    <div class="title">
      <span>办理时限预警任务</span>
    </div>
    <div class="box">
      <span class="box__tips">预警开关</span>
      <el-switch
        active-color="#63ACFF"
        inactive-color="#72777D"
        v-model="form.times_switch"
        class="left16"
      ></el-switch>
      <span class="left80">单个客户办理总时间超过</span>
      <el-input class="w240" type="number" v-model="form.timeLimit"></el-input>
      <span class="font18">分钟则预警！</span>

      <el-button
        class="left16"
        type="primary"
        @click="submitWarningSetting('business_limit')"
        >保存</el-button
      >
    </div>
    <div class="title">
      <span>最多篇跑一次预警任务</span>
    </div>
    <div class="box">
      <span class="box__tips">预警开关</span>
      <el-switch
        active-color="#63ACFF"
        inactive-color="#72777D"
        v-model="form.one_times_switch"
        class="left16"
      ></el-switch>
      <span class="left80">所有人近</span>
      <el-input class="w240" type="number" v-model="form.latestDay"></el-input>
      <span>天内来</span>
      <el-input class="w240" type="number" v-model="form.times"></el-input>
      <span class="font18">次营业厅则预警！</span>

      <el-button
        type="primary"
        class="left16"
        @click="submitWarningSetting('one_times')"
        >保存</el-button
      >
    </div>
    <div class="title">
      <span>区域流量分析任务</span>
    </div>
    <div class="box">
      <span class="box__tips">预警开关</span>
      <el-switch
        active-color="#63ACFF"
        inactive-color="#72777D"
        v-model="form.zone_switch"
        class="left16"
      ></el-switch>
      <div>
        <div>
          <span class="left80">休息区实时人数超过</span>
          <el-input
            class="w240"
            type="number"
            v-model="form.restZoneUserUpper"
          ></el-input>
          <span class="font18">人，则预警！</span>
        </div>
        <div style="margin-top: 10px">
          <span class="left80">综合业务办理区实时人数超过</span>
          <el-input
            class="w240"
            type="number"
            v-model="form.comprehensiveZoneUserUpper"
          ></el-input>
          <span class="font18">人，则预警！</span>
        </div>

        <div style="margin-top: 10px">
          <span class="left80">缴费区域实时人数超过</span>
          <el-input
            class="w240"
            type="number"
            v-model="form.payZoneUserUpper"
          ></el-input>
          <span class="font18">人，则预警！</span>
        </div>
      </div>
      <el-button
        type="primary"
        class="left16"
        @click="submitWarningSetting('flow')"
        >保存</el-button
      >
    </div>
    <div class="title">
      <span>预警剔除工作任务</span>
    </div>
    <div class="box">
      <span class="box__tips">剔除开关</span>
      <el-switch
        active-color="#63ACFF"
        inactive-color="#72777D"
        v-model="form.employee_switch"
        class="left16"
      ></el-switch>
      <span class="left80 font18">工作人员不纳入预警！</span>
      <el-button
        type="primary"
        class="left16"
        @click="submitWarningSetting('employee')"
        >保存</el-button
      >
    </div>
    <div class="title">
      <span>工作时间设定</span>
    </div>
    <div class="box">
      <span>上班时间</span>
      <el-time-select
        class="left16"
        v-model="form.startWorkTime"
        :picker-options="{
          start: '00:00',
          step: '00:30',
          end: '23:59',
        }"
        placeholder="选择时间"
      >
      </el-time-select>

      <span class="left80">下班时间</span>
      <el-time-select
        class="left16"
        v-model="form.endWorkTime"
        :picker-options="{
          start: '00:00',
          step: '00:30',
          end: '23:59',
        }"
        placeholder="选择时间"
      >
      </el-time-select>

      <el-button
        type="primary"
        class="left16"
        @click="submitWarningSetting('work_time')"
        >保存</el-button
      >
    </div>
  </div>
</template>

<script>
import { warningSetting, getWarningTypeList } from "@/api/home";
export default {
  data() {
    return {
      form: {
        times_switch: false,
        one_times_switch: false,
        zone_switch: false,
        employee_switch: false,
        timeLimit: null,
        latestDay: null,
        times: null,
        restZoneUserUpper: null,
        comprehensiveZoneUserUpper: null,
        payZoneUserUpper: null,
        startWorkTime: "09:00:00",
        endWorkTime: "18:00:00",
      },
    };
  },
  mounted() {
    this.getWarningTypeList();
  },
  methods: {
    async submitWarningSetting(typeName) {
      let params = { typeName };
      switch (typeName) {
        case "business_limit":
          params = {
            ...params,
            timeLimit: this.form.timeLimit,
            switchOpen: this.form.times_switch ? 1 : 0,
          };
          break;
        case "one_times":
          params = {
            ...params,
            latestDay: this.form.latestDay,
            times: this.form.times,
            switchOpen: this.form.one_times_switch ? 1 : 0,
          };
          break;
        case "flow":
          params = {
            ...params,
            restZoneUserUpper: this.form.restZoneUserUpper,
            comprehensiveZoneUserUpper: this.form.comprehensiveZoneUserUpper,
            payZoneUserUpper: this.form.payZoneUserUpper,
            switchOpen: this.form.zone_switch ? 1 : 0,
          };
          break;
        case "employee":
          params = {
            ...params,
            isCountEmployee: this.form.employee_switch ? 1 : 0,
          };
          break;
        default:
          //work_time
          params = {
            ...params,
            startWorkTime: this.form.startWorkTime,
            endWorkTime: this.form.endWorkTime,
          };
      }
      let res = await warningSetting(params);

      if (res.code == 200) {
        this.$message({
          message: "保存成功",
          type: "success",
        });
        // this.getWarningTypeList();
      }
    },

    async getWarningTypeList() {
      let res = await getWarningTypeList();
      if (res.code == 200) {
        res.data.forEach((item) => {
          switch (item.typeName) {
            case "business_limit":
              this.form.times_switch = item.switchOpen == 0 ? false : true;
              this.form.timeLimit = item.timeLimit;
              break;
            case "one_times":
              this.form.one_times_switch = item.switchOpen == 0 ? false : true;
              this.form.times = item.times;
              this.form.latestDay = item.latestDay;
              break;
            case "flow":
              this.form.zone_switch = item.switchOpen == 1 ? true : false;
              this.form.payZoneUserUpper = item.payZoneUserUpper;
              this.form.restZoneUserUpper = item.restZoneUserUpper;
              this.form.comprehensiveZoneUserUpper =
                item.comprehensiveZoneUserUpper;
              break;
            case "employee":
              this.form.employee_switch =
                item.isCountEmployee == 0 ? false : true;
              break;
            default:
              this.form.startWorkTime = item.startWorkTime;
              this.form.endWorkTime = item.endWorkTime;
              break;
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 0px;
}

.container {
  text-align: left;
  font-size: 18px;

  .title {
    color: #fff;
  }
  .box {
    background: #363940;
    width: 100%;
    margin: 16px 0 32px 0;
    box-sizing: border-box;
    padding: 22px 24px;
    border-radius: 8px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #949ba4;
    &__tips {
      color: #fff;
    }
    .left16 {
      margin-left: 16px;
    }
    .w240 {
      width: 240px;
      margin: 0 10px;
    }

    .left80 {
      margin-left: 80px;
      display: inline-block;
    }
    .font18 {
      color: #949ba4;
      font-size: 18px;
    }
  }
}
</style>